<template>
    <div class="play">
        <div class="container">
            <div class="content">
                <div class="first" style="flex:0 1 25%">
                    <Chart1 />
                </div>
                <div class="second" style="flex:0 1 50%">
                    <Chart2 />
                </div>
                <div class="third" style="flex:0 1 25%">
                    <Chart3 />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Chart1 from '../components/Chart1.vue'
import Chart3 from '../components/Chart3.vue'
import Chart2 from '../components/Chart2.vue';
export default{
    components:{
        Chart1,
        Chart3,
        Chart2
    }
}
</script>
<style scoped>
.play{
    position: fixed;
    width: 100vw;
    height: 100vh;
    /* 上下外边距 左右 */
    margin: 57px auto;
    /* background-color: aquamarine; */
}
.container{
    display: flex;
    flex-direction: column;
    /* background-color: bisque; */
    width: 100%;
    height: 100%;
}
.header{
    flex-grow: 1;
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
    font-size: 30px;
    text-align: center;
    /* background-image: url(../assets/images/header.png); */
    color: rgb(237, 65, 13);
}
.content{
    display: flex;
    flex-grow: 100;
    /* background-color: brown; */
}
.second{
    /* background-color: aquamarine; */
}
</style>